<template>
    <div class="LoginBox-r" >
        <!-- 标题区 -->
        <div class="dialog-header">
            <h2 class="dialog-title">技术文档平台</h2>
            <p class="dialog-subtitle">登录后获取完整文档访问权限</p>
        </div>
        <div style="margin:10px auto;width: 80%">
            <!-- 登录/注册切换 -->
            <el-tabs
                v-model="activeTab"
                class="login-tabs"
                @tab-click="handleTabChange"
            >
                <el-tab-pane name="login" label="登录"></el-tab-pane>
                <el-tab-pane name="register" label="注册"></el-tab-pane>
            </el-tabs>

            <!-- 登录表单 -->
            <el-form
                v-if="activeTab === 'login'"
                :model="loginForm"
                :rules="loginRules"
                ref="loginFormRef"
                class="tech-form"
            >
                <el-form-item prop="username">
                    <el-input
                        v-model="loginForm.username"
                        placeholder="用户名/邮箱"
                        prefix-icon="User"
                        class="tech-input"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        v-model="loginForm.password"
                        placeholder="密码"
                        type="password"
                        prefix-icon="Lock"
                        :show-password="showLoginPwd"
                        @click:suffix="showLoginPwd = !showLoginPwd"
                        class="tech-input"
                    ></el-input>
                </el-form-item>
                <div class="form-actions">
                    <el-checkbox v-model="loginForm.remember" class="remember-checkbox">
                        记住登录状态
                    </el-checkbox>
                    <el-link type="primary" class="forgot-link">忘记密码?</el-link>
                </div>
                <div>
                    <el-button
                        type="primary"
                        @click="handleLogin"
                        :loading="loginLoading"
                        class="submit-btn"
                        size="large"


                    >
                        登录
                    </el-button>
                </div>


            </el-form>

            <!-- 注册表单 -->
            <el-form
                v-if="activeTab === 'register'"
                :model="registerForm"
                :rules="registerRules"
                ref="registerFormRef"
                class="tech-form"
            >
                <el-form-item prop="email">
                    <el-input
                        v-model="registerForm.email"
                        placeholder="请输入邮箱（将作为登录账号）"
                        prefix-icon="Message"
                        class="tech-input"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        v-model="registerForm.password"
                        placeholder="密码（至少8位，含数字和字母）"
                        type="password"
                        prefix-icon="Lock"
                        :show-password="showRegPwd"
                        @click:suffix="showRegPwd = !showRegPwd"
                        class="tech-input"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-row :gutter="10">
                        <el-col :span="16">
                            <el-input
                                v-model="registerForm.code"
                                placeholder="验证码"
                                prefix-icon="Key"
                                class="tech-input"
                            ></el-input>
                        </el-col>
                        <el-col :span="8">
                            <el-button
                                type="primary"
                                @click="sendCode"
                                :disabled="codeDisabled"
                                class="code-btn"
                            >
                                {{ codeText }}
                            </el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        @click="handleRegister"
                        :loading="regLoading"
                        class="submit-btn"
                    >
                        注册
                    </el-button>
                </el-form-item>
            </el-form>
        </div>



        <!-- 分隔线 -->
        <div class="divider">
            <span class="divider-text">或使用以下方式登录</span>
        </div>

        <!-- 第三方登录 -->
        <div class="third-party-login">
            <el-button
                    icon="Github"
                    class="third-btn github-btn"
                    circle
                    @click="thirdLogin('github')"
            ></el-button>
            <el-button
                    icon="Twitter"
                    class="third-btn twitter-btn"
                    circle
                    @click="thirdLogin('twitter')"
            ></el-button>
            <el-button
                    icon="Mail"
                    class="third-btn google-btn"
                    circle
                    @click="thirdLogin('google')"
            ></el-button>
        </div>
    </div>


</template>

<script setup>
import {ref, reactive, onMounted} from 'vue';
import {ElMessage} from 'element-plus';


const activeTab = ref('login'); // 切换登录/注册
const isMobile = ref(false);

// 表单引用
const loginFormRef = ref(null);
const registerFormRef = ref(null);

// 登录表单数据
const loginForm = reactive({
    username: '',
    password: '',
    remember: false
});

// 注册表单数据
const registerForm = reactive({
    email: '',
    password: '',
    code: ''
});

// 密码显示状态
const showLoginPwd = ref(false);
const showRegPwd = ref(false);

// 加载状态
const loginLoading = ref(false);
const regLoading = ref(false);

// 验证码状态
const codeText = ref('获取验证码');
const codeDisabled = ref(false);
const codeCount = ref(60);

// 登录表单验证规则
const loginRules = reactive({
    username: [
        {required: true, message: '请输入用户名或邮箱', trigger: 'blur'}
    ],
    password: [
        {required: true, message: '请输入密码', trigger: 'blur'},
        {min: 8, message: '密码长度至少8位', trigger: 'blur'}
    ]
});

// 注册表单验证规则
const registerRules = reactive({
    email: [
        {required: true, message: '请输入邮箱', trigger: 'blur'},
        {type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur'}
    ],
    password: [
        {required: true, message: '请输入密码', trigger: 'blur'},
        {min: 8, message: '密码长度至少8位', trigger: 'blur'},
        {
            pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
            message: '密码需包含字母和数字',
            trigger: 'blur'
        }
    ],
    code: [
        {required: true, message: '请输入验证码', trigger: 'blur'},
        {len: 6, message: '验证码为6位', trigger: 'blur'}
    ]
});

// 处理登录
const handleLogin = async () => {
    try {
        await loginFormRef.value.validate();
        loginLoading.value = true;
        // 模拟登录请求
        setTimeout(() => {
            ElMessage.success('登录成功');
            dialogVisible.value = false;
            loginLoading.value = false;
        }, 1500);
    } catch (error) {
        console.log('登录表单验证失败:', error);
    }
};

// 处理注册
const handleRegister = async () => {
    try {
        await registerFormRef.value.validate();
        regLoading.value = true;
        // 模拟注册请求
        setTimeout(() => {
            ElMessage.success('注册成功，即将跳转登录');
            activeTab.value = 'login';
            regLoading.value = false;
        }, 1500);
    } catch (error) {
        console.log('注册表单验证失败:', error);
    }
};

// 发送验证码
const sendCode = () => {
    if (!registerForm.email) {
        ElMessage.warning('请先输入邮箱');
        return;
    }
    // 验证邮箱格式
    const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailReg.test(registerForm.email)) {
        ElMessage.warning('请输入正确的邮箱格式');
        return;
    }
    // 开始倒计时
    codeDisabled.value = true;
    const timer = setInterval(() => {
        codeCount.value--;
        codeText.value = `${codeCount.value}s后重发`;
        if (codeCount.value <= 0) {
            clearInterval(timer);
            codeText.value = '获取验证码';
            codeDisabled.value = false;
            codeCount.value = 60;
        }
    }, 1000);
    // 模拟发送请求
    ElMessage.success('验证码已发送至邮箱');
};

// 切换标签时重置表单
const handleTabChange = (tab) => {
    if (tab.name === 'login' && loginFormRef.value) {
        loginFormRef.value.clearValidate();
    }
    if (tab.name === 'register' && registerFormRef.value) {
        registerFormRef.value.clearValidate();
    }
};

// 第三方登录
const thirdLogin = (type) => {
    ElMessage.info(`即将通过${type}登录`);
    // 实际项目中调用对应第三方登录SDK
};

// 响应式判断
onMounted(() => {
    const checkMobile = () => {
        isMobile.value = window.innerWidth < 768;
    };
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
});
</script>

<style scoped>


/* 标题区 */
.dialog-header {
    text-align: center;
    margin-bottom: 24px;
}

.dialog-title {
    font-size: 22px;
    font-weight: 600;
    color: #2c3e50; /* 深灰科技色 */
    margin: 0 0 8px 0;
}

.dialog-subtitle {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* 标签切换 */
.login-tabs {
    margin-bottom: 24px;
    --el-tabs-nav-item-active-color: #3b82f6; /* 技术蓝 */
    --el-tabs-ink-bar-color: #3b82f6;
}

/* 表单样式 */
.tech-form {
    width: 100%;
}

/* 输入框样式 - 模拟代码块风格 */
.tech-input {
    --el-input-bg-color: #fff;
    --el-input-border-color: #e5e7eb;
    --el-input-focus-border-color: #3b82f6;
    --el-input-hover-border-color: #94a3b8;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 表单操作区 */
.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-size: 14px;
}

.remember-checkbox {
    --el-checkbox-text-color: #666;
}

.forgot-link {
    font-size: 13px;
}

/* 提交按钮 */
.submit-btn {
    --el-button-bg-color: #3b82f6;
    --el-button-hover-bg-color: #2563eb;
    height: 44px;
    font-size: 16px;
    border-radius: 4px;
    width: 100%;
}

/* 分隔线 */
.divider {
    position: relative;
    margin: 24px 0;
    text-align: center;
}

.divider::before, .divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background-color: #e5e7eb;
}

.divider::before {
    left: 0;
}

.divider::after {
    right: 0;
}

.divider-text {
    font-size: 13px;
    color: #999;
    background-color: #fafafa;
    padding: 0 12px;
    position: relative;
    z-index: 1;
}

/* 第三方登录按钮 */
.third-party-login {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 12px;
}

.third-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.github-btn {
    --el-button-bg-color: #24292e;
    --el-button-hover-bg-color: #1d2125;
}

.twitter-btn {
    --el-button-bg-color: #1da1f2;
    --el-button-hover-bg-color: #0d95e8;
}

.google-btn {
    --el-button-bg-color: #ea4335;
    --el-button-hover-bg-color: #d93025;
}

/* 验证码按钮 */
.code-btn {
    width: 100%;
    height: 100%;
    --el-button-border-color: #e5e7eb;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .dialog-title {
        font-size: 18px;
    }

    .submit-btn {
        height: 40px;
        font-size: 14px;
    }

    .third-btn {
        width: 36px;
        height: 36px;
    }
}
</style>